<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    //利用绘制图形与清除矩形区域, 可以实现简单的动画
    window.onload = function() {
        var x = 10 , y = 10 , oldx = 10 , oldy = 10;
        var width = 100 , height = 50;

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        canvas.width = 500;
        canvas.height = 500;
        canvas.style.border = "1px solid #000";

        var intervalId = setInterval(function(){
            ctx.clearRect( oldx -1 , oldy - 1  ,width + 2 , height + 2);
            ctx.strokeRect( x, y, width, height );

            oldx = x;
            oldy = y;

            x += 4;
            y += 2;

            if ( oldy >= 200 ) {
                // clearInterval( intervalId );
                x = 10, y = 10;
            }
        },20);
    }
</script>
</body>
</html>